<template>
  <el-drawer
    v-model="drawerlist"
    title="浏览明细"
    :with-header="true"
    custom-class="drawers"
    :size="1200"
  >
    <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
    <ZwTable
      ref="tableReflist"
      class="table-box"
      :option="tableOption"
      :fetch-params="state.searchParams"
      :fetch-api="fetchApi()"
    >
     <template #headerOperate>
        <el-button type="primary" @click="exportFun">导出</el-button>
      </template>
    </ZwTable>
  </el-drawer>
</template>
<script setup lang="tsx">
import {
  reactive,
  ref,
  onMounted,
  computed,
  watch,
  defineExpose,
  defineProps,
  nextTick,
} from "vue";
import { downFile } from '@/utils/utils'
import { importDetail, browsedetailList,dictEnum } from "@/api/highMaterial/sourceMaterials";
import ZwSearchForm from "@/components/zw/search-form/SearchForm";
import ZwTable from "@/components/zw/table/Table";
import { deepCopy } from "@/utils/helper";
const props = defineProps(["rowid",'stagetype']);
const drawerlist = ref(false);
const tableReflist: any = ref<HTMLElement | null>(null)
const defaultParams = {
  type:1,//类型，1：商品 2：页面
  material_id:'', //店铺id
  visitors_name: "", //浏览人信息
  send_channel: 0, //发送渠道
  env_type: 0, //浏览环境 
  send_member_id: [], //发送成员
  browse_time: [], //浏览时间
  browse_duration: [], //浏览时长
};
const state = reactive({
  searchParams: deepCopy(defaultParams),
});
const searchOption = computed(() => {
  return [
    {
      label: "浏览人信息",
      name: "visitors_name",
      value: "",
      type: "input",
      placeholder: "请输入浏览人姓名/昵称/手机号搜索",
    },
    {
      label: "发送渠道",
      name: "send_channel",
      value: "",
      type: "select",
      placeholder: "请选择发送渠道",
      fetchOptionApi: () => {
        return new Promise((resolve) => {
          dictEnum({dict_id:5}).then((res: any) => {
            let levelid: any = [{name: '全部', id: ''}]
            console.log(res,'resresres')
            res.forEach((item: any) => {
              console.log(item)
              levelid.push(item)
            })
            resolve(levelid)
          })
        })
      },
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id,
      }),
    },
    {
      label: "浏览环境",
      name: "env_type",
      value: "",
      type: "select",
      placeholder: "请选择浏览环境",
      fetchOptionApi: () => {
       return new Promise((resolve) => {
          dictEnum({dict_id:7}).then((res: any) => {
            let levelid: any = []
            console.log(res,'resresres')
            res.forEach((item: any) => {
              console.log(item)
              levelid.push(item)
              resolve(levelid)
            })
          })
        })
      },
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id,
      }),
    },
    {
      label: "发送成员",
      name: "send_member_id",
      value: [],
      type: "select",
      placeholder: "全部",
      multiple: true,
      popperClass: "zw-hide_select_option",
      isUserSelect: true,
      formatOption: (v) => ({
        label: v.name,
        value: v.id,
      }),
    },
    {
      label: "浏览时间",
      name: "browse_time",
      value: [],
      type: "datePicker",
      datePickerType: "daterange",
      valueFormat: "YYYY-MM-DD HH:mm:ss",
      startPlaceholder: "开始日期",
      endPlaceholder: "结束日期",
    },
    {
      label: "浏览时长",
      name: "browse_duration",
      unit: "S",
      value: [],
      precision:0,
      type: "section",
    },
  ];
});
const tableOption = [
  {
    prop: "browse_time",
    label: "浏览时间",
    width: 200,
  },
  {
    prop: "visitors_name",
    label: "浏览客户",
    width: 200,
  },
  {
    prop: "env_name",
    label: "浏览环境",
    width: 130,
  },
  {
    prop: "send_name",
    label: "发送成员",
    width: 130,
  },
  {
    prop: "send_channel",
    label: "发送渠道",
    width: 130,
  },
  {
    prop: "visitors_content",
    label: "浏览内容"
  },
];
const fetchApi = () => {
  return browsedetailList;
};
const search = (v: any) => {
  console.log(v, '查询参数')
  state.searchParams = {
    ...deepCopy(defaultParams),
    ...v
  }
  console.log(state.searchParams, '搜索')
}
const reset = (v: any) => {
  state.searchParams = { ...deepCopy(defaultParams) }
}
//导出
const exportFun = (v: any) => {
  const data= state.searchParams
  importDetail(data).then((res: any) => {
      console.log(res)
       downFile(res.file_url, res.file_name)
  })
}
// 抛出方法不然id跟type取不到，不能使用prop传参
const draweopen = (v:any) => {
  state.searchParams = {
    ...deepCopy(defaultParams),
    ...v
  }
  defaultParams.material_id=v.material_id
  defaultParams.type=v.type
  drawerlist.value = true
}
defineExpose({ drawerlist ,draweopen});
 watch(
     drawerlist,
    (val) => {
      if (val) {
        console.log(drawerlist,"valvalval")
        // nextTick(()=>{

        //   tableReflist.value.reload()
        // })
      }
    }
  )
</script>
<style lang="scss" scoped>
.slot {
  border-bottom: 1px solid #eaeaea;
  margin: -32px -16px 0;
}
.product_box {
  .mobile_box {
    box-sizing: content-box;
    width: 414px;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #d2d8db;
    background-color: #f3fafb;
    margin: 0 auto;
    margin-top: 40px;
    .white_box {
      width: 100%;
      background-color: #fff;
      // height: 840px;
    }
    .title_box {
      display: flex;
      align-items: center;
      height: 44px;
      padding-left: 11px;
      background: #29a9f5;
      border-radius: 15px 15px 0px 0px;
      color: #fff;
      .title_r {
        flex: 1;
        text-align: center;
      }
    }
    .product_pic {
      display: flex;
      justify-content: center;
    }
    .product_information {
      margin-top: 16px;
      min-height: 65px;
      background: #ffffff;
      box-shadow: 0px 6px 10px 0px rgba(46, 91, 255, 0.07);
      border-radius: 8px;
      border: 1px solid #eff2ff;
      padding: 16px 12px 0;
      color: #282828;
      font-weight: 550;
      font-size: 18px;
      .Price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #969696;
        font-size: 14px;
        margin-top: 16px;
      }
      .specs_box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        .specs_rule {
          font-size: 14px;
          color: #969696;
          line-height: 29px;
        }
        .specs_text {
          min-width: 85px;
          height: 26px;
          background: #f7f7f7;
          border-radius: 6px;
          border: 1px solid #e3e3e3;
          font-size: 14px;
          color: #969696;
          margin: 0 12px 12px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 5px;
        }
        .active {
          background: #eff2ff;
          color: #0081ff;
        }
      }
    }
    .product_describe {
      margin-top: 16px;
      min-height: 100px;
      background: #ffffff;
      box-shadow: 0px 6px 10px 0px rgba(46, 91, 255, 0.07);
      border-radius: 8px;
      border: 1px solid #eff2ff;
      padding: 16px 12px 0;
      .describe {
        color: #282828;
        font-weight: 550;
        font-size: 18px;
      }
      .describe_text {
        margin-top: 13px;
        line-height: 20px;
        color: #969696;
        font-size: 14px;
      }
    }
  }
}
.scroll {
  height: 900px;
  overflow-y: scroll;
}
</style>
